<template>
  <!-- {{ gridOptions.rowData }} -->
  <ElButton @click="saveData">保存数据</ElButton>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref, shallowRef } from 'vue'
import { type GridApi, type GridOptions } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

import json from './data/cus-cmp.json'
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const gridOptions = ref<GridOptions<IOlympicData>>({
  rowData: json,
  enableCellSpan: true,
  columnDefs: [
    // 行 文字居中
    { field: 'name', cellStyle: { textAlign: 'center' } },
    { field: 'age' },
    { field: 'gender' },
    { field: 'phone' },
    { field: 'email' },
    { field: 'address' },
    { field: 'company' },
    { field: 'rate' },
  ],
  defaultColDef: {
    editable: true,
    flex: 1,
  },
  onCellClicked(event) {
    console.log(`单元格单击 output->event`, event)
  },
  onCellDoubleClicked: (event) => {
    console.log(`单元格双击 output->event`, event)
  },
  onRowClicked: (event) => {
    console.log(`行单击 output->event`, event)
  },
  onRowDoubleClicked: (event) => {
    console.log(`行双击 output->event`, event)
  },
  onGridReady: (event) => {
    // 表格初始化完成 未渲染
    console.log(`output-> api context type`, event.api, event.context, event.type)
    gridApi.value = event.api;
  },
  // 如果cell更改了则需要刷新一下表格
  onCellValueChanged: (event) => {
    console.log(`output->event changed`, event.node)
  },
  onFindChanged: (event) => {
    console.log(`findChanged output->event`, event)
  },
  // 列移动事件
  onDragStopped: (event) => {
    console.log(`output-> 列状态`, event.api.getColumnState());
    console.log(`output-> onDragStopped`, event)
  }
})

function saveData() {
  const data = gridOptions.value.rowData?.filter(m => m.isEdit ?? false);
  console.log(`output->data`, data)
}
</script>

<style scoped></style>
